<template>
  <l-layout :top="160" :topMove="false">
    <template #top>
      <!-- 信息 -->
      <div class="erpCase">
        <div class="form_div_back">
          <div class="header_name">
            {{ $t(formData.case_erp_sale_f_Theme) }}
          </div>
          <div class="form_information form_margin_top_16">
            <div>
              {{ $t("创建人：") }}
              {{
                $t(
                  formData.case_erp_sale_f_CreateUserName == null
                    ? ""
                    : formData.case_erp_sale_f_CreateUserName
                )
              }}
            </div>
            <div class="form_left_32">
              {{ $t("创建时间：" + formData.case_erp_sale_f_CreateDate) }}
            </div>
            <div class="form_left_32">
              {{ $t("最后修改人：") }}
              {{
                $t(
                  formData.case_erp_sale_f_ModifyUserName == null
                    ? ""
                    : formData.case_erp_sale_f_ModifyUserName
                )
              }}
            </div>
            <div class="form_left_32">
              {{ $t("修改时间：") }}
              {{
                $t(
                  formData.case_erp_sale_f_ModifyDate == null
                    ? ""
                    : formData.case_erp_sale_f_ModifyDate
                )
              }}
            </div>
          </div>
          <div class="mt-16">
            <el-button size="mini" @click="formEdit">{{
              $t("Edit")
            }}</el-button>
            <el-button size="mini" @click="formDelete">{{
              $t("Delete")
            }}</el-button>
            <!-- <el-button size="mini">{{ $t('导出') }}</el-button>
                        <el-button size="mini">{{ $t('打印') }}</el-button> -->
          </div>
        </div>
      </div>
    </template>
    <div
      class="l-rblock l-form-viewer erpCase seal_layout"
      style="position: absolute; top: -8px; padding: 0 16px 16px 16px"
    >
      <el-form
        :model="formData"
        :rules="rules"
        size="mini"
        labelPosition="right"
        labelWidth="110px"
        ref="form"
      >
        <div class="l-auto-window">
          <div class="form_back mt-16" style="padding-bottom: 10px">
            <!-- 出库 -->
            <i
              v-if="formData.case_erp_sale_f_OutStoreState == '1'"
              style="
                font-size: 20px;
                position: absolute;
                left: 178px;
                top: 20px;
              "
              class="learun-icon-circle-sigh-base learun-error"
            />
            <i
              v-else
              style="
                font-size: 20px;
                position: absolute;
                left: 178px;
                top: 20px;
              "
              class="learun-icon-circle-correct-base learun-success"
            />
            <!-- 开票 -->
            <i
              v-if="formData.case_erp_sale_f_InvoiceState == '1'"
              style="
                font-size: 20px;
                position: absolute;
                left: 274px;
                top: 20px;
              "
              class="learun-icon-circle-sigh-base learun-error"
            />
            <i
              v-else
              style="
                font-size: 20px;
                position: absolute;
                left: 274px;
                top: 20px;
              "
              class="learun-icon-circle-correct-base learun-success"
            />
            <!-- 收款 -->
            <i
              v-if="formData.f_GatherState == '1'"
              style="
                font-size: 20px;
                position: absolute;
                left: 370px;
                top: 20px;
              "
              class="learun-icon-circle-sigh-base learun-error"
            />
            <i
              v-else
              style="
                font-size: 20px;
                position: absolute;
                left: 370px;
                top: 20px;
              "
              class="learun-icon-circle-correct-base learun-success"
            />
            <el-tabs v-model="activeName">
              <el-tab-pane
                class="l-tabs-container"
                :label="$t('订单信息')"
                name="tab0"
              >
                <div class="l-rblock">
                  <div class="form_name">{{ $t("基础信息") }}</div>
                  <div>
                    <div class="form_information">
                      <div style="width: 440px" class="mt-16">
                        <div>
                          {{
                            $t("销售单号：" + formData.case_erp_sale_f_Number)
                          }}
                        </div>
                        <div class="mt-16">
                          {{
                            $t("销售日期：" + formData.case_erp_sale_f_SaleDate)
                          }}
                        </div>
                        <div class="mt-16">
                          {{
                            $t(
                              "联系人：" + formData.case_erp_sale_f_ClientPerson
                            )
                          }}
                        </div>
                        <div class="mt-16 form_information sale_div">
                          {{ $t("客户经理：") }}
                          <l-user-select
                            v-model="formData.case_erp_sale_f_Manager"
                            disabled
                            style="width: 50%"
                          />
                        </div>
                        <div class="mt-16">
                          {{
                            $t("联系电话：" + formData.case_erp_sale_f_Phone)
                          }}
                        </div>
                        <div class="mt-16">
                          {{
                            $t(
                              "客户订单号：" +
                                formData.case_erp_sale_f_ClientNumber
                            )
                          }}
                        </div>
                      </div>
                      <div
                        style="width: 440px"
                        class="panel_margin_left_56 mt-16"
                      >
                        <div>
                          {{
                            $t(
                              "销售订单主题：" + formData.case_erp_sale_f_Theme
                            )
                          }}
                        </div>
                        <div class="mt-16">{{ $t("客户名称：" + name) }}</div>
                        <div class="mt-16">
                          {{
                            $t(
                              "联系方式：" + formData.case_erp_sale_f_ClientWay
                            )
                          }}
                        </div>
                        <div class="mt-16">
                          {{ $t("所属部门：" + formData.case_erp_sale_f_Dep) }}
                        </div>
                        <div class="mt-16">
                          {{
                            $t("结算方式：" + formData.case_erp_sale_f_PayType)
                          }}
                        </div>
                        <div class="mt-16">
                          {{
                            $t(
                              "交货地址：" + formData.case_erp_sale_f_PayAddress
                            )
                          }}
                        </div>
                      </div>
                    </div>
                    <div class="mt-16">
                      {{ $t("备注：" + formData.case_erp_sale_f_Description) }}
                    </div>
                  </div>
                  <el-col :span="24">
                    <div class="form_name" style="margin-top: 22px">
                      {{ $t("产品明细") }}
                    </div>
                    <!-- showSummary -->
                    <l-edit-table
                      :isAddBtn="false"
                      ref="mainTable"
                      :isRemoveBtn="false"
                      :columns="
                        lr_formTableAuth(
                          'case_erp_saledetail',
                          case_erp_saledetail_columns
                        )
                      "
                      :dataSource="case_erp_saledetail_data"
                      height="200px"
                      :summaryList="[
                        { label: '总量', prop: 'f_Count', decimals: 0 },
                        { label: '总金额', prop: 'f_AfterTaxAmount' },
                      ]"
                      showSummary2
                      rowKey="index"
                    >
                      <!-- <l-table ref="mainTable" height="300px" class="form_margin_top_16"
                                            :columns="lr_getPageColumns(case_erp_saledetail_columns)" row-key="f_Id"
                                            :dataSource="case_erp_saledetail_data"> -->
                    </l-edit-table>
                  </el-col>
                  <el-col
                    v-if="lr_formLookAuth('case_erp_sale_f_File')"
                    :span="24"
                    style="margin-top: 40px"
                  >
                    <el-col :span="24">
                      <div class="learun-form-title mt-8">
                        {{ $t("附件")
                        }}<span v-if="fileCount > 0">({{ fileCount }})</span>
                      </div>
                    </el-col>
                    <el-col
                      v-if="lr_formLookAuth('case_erp_sale_f_File')"
                      :span="24"
                    >
                      <el-form-item prop="case_erp_sale_f_File" labelWidth="0">
                        <l-upload
                          drag
                          maxSize="10"
                          sizeType="MB"
                          :limit="3"
                          showFileList="uploadTheme1"
                          disabled
                          v-model="formData.case_erp_sale_f_File"
                          @load="fileLoad"
                          @success="fileLoad"
                          @remove="fileLoad"
                        />
                      </el-form-item>
                    </el-col>
                  </el-col>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="$t('出库记录')" name="tab1">
                <out-bound-form :materialId="formData.case_erp_sale_f_Id" />
              </el-tab-pane>
              <el-tab-pane
                class="l-tabs-container"
                :label="$t('开票记录')"
                name="tab2"
              >
                <l-table
                  :columns="lr_getPageColumns(Invoicelog_columns)"
                  :dataSource="Invoicelog_data"
                />
              </el-tab-pane>
              <el-tab-pane
                class="l-tabs-container collection"
                :label="$t('收款记录')"
                name="tab3"
              >
                <collection-form
                  :id="this.formData.case_erp_sale_f_Id"
                  ref="collectionForm"
                />
              </el-tab-pane>
              <el-tab-pane
                class="l-tabs-container"
                :label="$t('生产记录')"
                name="tab4"
              >
                <l-table
                  :columns="lr_getPageColumns(productlog_columns)"
                  :dataSource="productlog_data"
                >
                  <template v-slot:f_State="scope">
                    <div v-if="scope.row.f_State == 1">{{ $t("未完成") }}</div>
                    <div v-else>{{ $t("已完成") }}</div>
                  </template>
                </l-table>
              </el-tab-pane>
              <el-tab-pane
                class="l-tabs-container"
                :label="$t('操作记录')"
                name="tab5"
              >
                <!-- <l-table :columns="lr_getPageColumns(log_columns)" :dataSource="log_data"></l-table> -->
                <operationRecords :materialId="formData.case_erp_sale_f_Id" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-form>
      <l-dialog
        :title="$t(formTitle)"
        :visible.sync="formVisible"
        @ok="handleSave"
        :height="800"
        :width="1000"
        @close="handleCloseForm"
        @opened="handleOpenedForm"
      >
        <my-form ref="my_form"></my-form>
      </l-dialog>
    </div>
  </l-layout>
</template>
<script>
const api = window.$api.erpcase.sale;
import OperationRecords from "../material/operationRecords";
// import DeliveryRecords from '../material/deliveryRecords'
import OutBoundForm from "./outBoundForm";
import CollectionForm from "../customerReturn/collectionForm";
import MyForm from "./form";
export default {
  props: {
    isReadOnly: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    MyForm,
    OperationRecords,
    OutBoundForm,
    CollectionForm,
  },
  data() {
    return {
      name: "",
      // 表单
      formVisible: false,
      formTitle: "",

      moduleCode: "ERP_Sale",
      activeName: "tab0",
      formData: {
        case_erp_sale_f_Number: "", // 销售单号
        case_erp_sale_f_IsSysNum: "0", //
        case_erp_sale_f_Theme: "", // 订单主题
        case_erp_sale_f_SaleDate: "", // 销售日期
        case_erp_sale_f_ClientName: "", // 客户名称
        case_erp_sale_f_ClientPerson: "", // 联系人
        case_erp_sale_f_ClientWay: "", // 联系方式
        case_erp_sale_f_Manager: "", // 客户经理
        case_erp_sale_f_Dep: "", // 所属部门
        case_erp_sale_f_Phone: "", // 联系电话
        case_erp_sale_f_RelatedProject: "", // 关联项目
        case_erp_sale_f_PayType: "", // 结算方式
        case_erp_sale_f_ClientNumber: "", // 客户订单号
        case_erp_sale_f_PayAddress: "", // 交货地址
        case_erp_sale_f_Description: "", // 备注
        case_erp_sale_f_CreateUserName: "", //创建人
        case_erp_sale_f_CreateDate: "", // 创建时间
        case_erp_sale_f_ModifyUserName: "", // 最终修改人
        case_erp_sale_f_ModifyDate: "", // 修改时间
        case_erp_sale_f_File: "", // 附件
      },
      rules: {},
      case_erp_saledetail_columns: [
        {
          id: "case_erp_saledetail_F_Number",
          prop: "f_Number",
          label: "产品编码",
        },
        { id: "case_erp_saledetail_F_Name", prop: "f_Name", label: "产品名称" },
        {
          id: "case_erp_saledetail_F_Model",
          prop: "f_Model",
          label: "规格型号",
        },
        { id: "case_erp_saledetail_F_Price", prop: "f_Price", label: "单价" },
        {
          id: "case_erp_saledetail_F_Count",
          prop: "f_Count",
          label: "销售数量",
          width: "130",
        }, // isSummary: true
        {
          id: "case_erp_saledetail_F_Discount",
          prop: "f_Discount",
          label: "折扣",
        },
        {
          id: "case_erp_saledetail_F_TaxRate",
          prop: "f_TaxRate",
          label: "税率",
        },
        {
          id: "case_erp_saledetail_F_TaxBreak",
          prop: "f_TaxBreak",
          label: "税费",
        },
        {
          id: "case_erp_saledetail_F_AfterTaxAmount",
          prop: "f_AfterTaxAmount",
          label: "税后金额",
        }, // isSummary: true
        {
          id: "case_erp_saledetail_F_DeliveryDate",
          prop: "f_DeliveryDate",
          label: "交付日期",
          dataType: "datetime",
          format: "yyyy-MM-dd",
        },
        {
          id: "case_erp_saledetail_F_Description",
          prop: "f_Description",
          label: "备注",
        },
      ],
      case_erp_saledetail_data: [],

      // 出库记录
      Issue_columns: [
        { id: "f_Number", prop: "f_Number", label: "出库单号" },
        { id: "f_Theme", prop: "f_Theme", label: "出库订单主题" },
        { id: "f_CreateDate", prop: "f_CreateDate", label: "出库日期" },
        { id: "f_Name", prop: "f_Name", label: "客户名称" },
        { id: "f_Count", prop: "f_Count", label: "出库总量" },
        {
          id: "f_CreateUserName",
          prop: "f_CreateUserName",
          label: "出库人员",
          width: "130",
        },
        { id: "f_Store", prop: "f_Store", label: "出库仓库" },
      ],
      Issue_data: [],

      // 开票记录
      Invoicelog_columns: [
        { id: "f_Number", prop: "f_Number", label: "开票编号" },
        { id: "f_Theme", prop: "f_Theme", label: "开票主题" },
        { id: "f_CreateDate", prop: "f_CreateDate", label: "开票日期" },
        { id: "f_InvoiceName", prop: "f_InvoiceName", label: "发票类型" },
        { id: "f_TicketNum", prop: "f_TicketNum", label: "发票号码" },
        {
          id: "f_TicketAmount",
          prop: "f_TicketAmount",
          label: "发票金额",
          width: "130",
        },
        { id: "f_TicketName", prop: "f_TicketName", label: "收票方" },
      ],
      Invoicelog_data: [],

      // 生产记录
      productlog_columns: [
        { id: "f_Number", prop: "f_Number", label: "生产编号" },
        { id: "f_Theme", prop: "f_Theme", label: "收入主题" },
        { id: "f_Type", prop: "f_Type", label: "生产类型" },
        { id: "f_Date", prop: "f_Date", label: "单据日期" },
        { id: "f_Person", prop: "f_Person", label: "负责人" },
        { id: "f_Dep", prop: "f_Dep", label: "生产部门", width: "130" },
        { id: "f_State", prop: "f_State", label: "状态" },
      ],
      productlog_data: [],
      fileCount: 0,

      // // 操作记录
      // log_columns: [
      //     { id: 'f_OperateAccount', prop: 'f_OperateAccount', label: '操作人' },
      //     { id: 'f_OperateTime', prop: 'f_OperateTime', label: '操作时间' },
      //     { id: 'f_OperateTypeId', prop: 'f_OperateTypeId', label: '操作类型' },
      // ],
      // log_data: [],
    };
  },

  computed: {
    case_erp_sale_f_IsSysNumOptions() {
      return [{ value: "0", label: "用系统编号" }];
    },
    case_erp_sale_f_ClientWayOptions() {
      this.lr_loadDataItem("FollowType");
      return this.lr_dataItemOptions(this.lr_dataItem["FollowType"]);
    },
    case_erp_sale_f_ManagerOptions() {
      return [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" },
      ];
    },
    case_erp_sale_f_RelatedProjectOptions() {
      this.lr_loadDataItem("Type");
      return this.lr_dataItemOptions(this.lr_dataItem["Type"]);
    },
    case_erp_sale_f_PayTypeOptions() {
      this.lr_loadDataItem("PurchaseType");
      return this.lr_dataItemOptions(this.lr_dataItem["PurchaseType"]);
    },
  },
  methods: {
    //fileLoad
    fileLoad({ list }) {
      this.fileCount = list.length;
    },
    // 切换按钮
    async tabClick() {
      const list = {
        f_SaleId: this.formData.case_erp_sale_f_Id,
        rows: 50,
        page: 1,
        sidx: "F_CreateDate DESC",
      };
      if (this.activeName == "tab1") {
        // console.log('出库记录',this.formData.case_erp_sale_f_Id)

        const data = await this.$awaitWraper(api.outstorelog(list));
        this.Issue_data = data.rows;
        // console.log('出库记录', data)
      } else if (this.activeName == "tab2") {
        const data = await this.$awaitWraper(api.invoicelog(list));
        this.Invoicelog_data = data.rows;
        console.log("开票记录", data);
      } else if (this.activeName == "tab4") {
        const data = await this.$awaitWraper(api.productlog(list));
        this.productlog_data = data.rows;
        console.log("生产记录", data);
      } else if (this.activeName == "tab3") {
        this.$refs.collectionForm.activated();
      }
    },
    // Reset表单
    resetForm() {
      this.$formClear(this.$refs.form);
      this.activeName = "tab0";
      this.case_erp_saledetail_data = [];
      this.fileCount = 0;
    },
    // 校验表单
    async validateForm() {
      if (!(await this.$formValidateWraper(this.$refs.form))) {
        return false;
      }

      return true;
    },
    // 设置表单数据
    setForm(data) {
      this.$setFormData(this.formData, data.caseErpSaleEntity, "case_erp_sale");
      this.case_erp_saledetail_data = data.caseErpSaledetailList;
      const list = this.lr_DataSource("ERP_Customers");

      if (this.formData.case_erp_sale_f_ClientName) {
        for (let i in list) {
          if (list[i].f_id == this.formData.case_erp_sale_f_ClientName) {
            this.name = list[i].f_name;
          }
        }
      }
      this.formData.case_erp_sale_f_CreateDate = this.$formatDate(
        this.formData.case_erp_sale_f_CreateDate,
        "yyyy-MM-dd"
      );
      this.formData.case_erp_sale_f_ModifyDate = this.$formatDate(
        this.formData.case_erp_sale_f_ModifyDate,
        "yyyy-MM-dd"
      );
      this.formData.case_erp_sale_f_SaleDate = this.$formatDate(
        this.formData.case_erp_sale_f_SaleDate,
        "yyyy-MM-dd"
      );
      // }
    },
    // 获取表单数据
    getForm() {
      const formData = {};
      formData.caseErpSaleEntity = this.$getFormData(
        this.formData,
        "case_erp_sale"
      );
      formData.caseErpSaledetailList = this.case_erp_saledetail_data;
      return formData;
    },

    async loadFormData({ keyValue /*,params,node*/ }) {
      //  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
      const data = await this.$awaitWraper(api.get(keyValue));
      if (data) {
        this.setForm(data);
        return true;
      } else {
        return false;
      }
    },

    async saveForm({ keyValue, isEdit /*,code,node*/ }) {
      // isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
      const postData = this.getForm();
      if (isEdit) {
        // Edit
        return await this.$awaitWraper(api.update(keyValue, postData));
      } else {
        // Add
        postData.caseErpSaleEntity.f_Id = keyValue;

        return await this.$awaitWraper(api.add(postData));
      }
    },

    // Delete按钮
    formDelete() {
      this.$emit("refHandleDelete", null);
    },
    // Edit按钮
    async formEdit() {
      this.formTitle = "Edit";
      this.formVisible = true;
    },
    async handleSave(showLoading, hideLoading) {
      showLoading("saving data...");

      if (await this.$refs.my_form.validateForm()) {
        const res = await this.$refs.my_form.saveForm({
          keyValue: this.formData.case_erp_sale_f_Id,
          isEdit: true,
        });
        if (res) {
          const msg = "更新成功!";
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadFormData({ keyValue: this.formData.case_erp_sale_f_Id });
          this.formVisible = false;
        }
      }

      hideLoading();
    },
    handleCloseForm() {
      this.$refs.my_form.resetForm();
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("Loading data...");
        await this.$refs.my_form.loadFormData({
          keyValue: this.formData.case_erp_sale_f_Id,
        });

        hideLoading();
      }
    },
  },
};
</script>

<style>
.sale_div .el-input.is-disabled .el-input__inner {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #595959 !important;
}
</style>